<template>
  <el-dialog
    title="单位筛选："
    :visible.sync="orgCodeVisiblesubmit"
    width="70%"
    :before-close="orgCodeHandleClosesubmit">
    <p style="font-size: 16px;display: inline-block" v-if="choosedOrgs">已选择:</p>
    <p style="display: inline-block;margin-left:6px;color: #2d8cf0">{{choosedOrgs}}</p>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <div style="height:350px;overflow:auto">
      <el-tree class="filter-tree"
               :data="treeData"
               :load="getTreeChildren"
               lazy
               node-key="id"
               ref="deptTree"
               highlight-current
               show-checkbox
               :check-strictly="true"
               :props="defaultProps"
               :filter-node-method="filterNode"
               :default-checked-keys="checkedKeys"
               @node-click="orgCodeClick"
               @check-change="orgCodeCheckChange">
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDept()">取 消</el-button>
      <el-button type="primary" @click="confirmDept()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {getDeptXieTree,getDeptTree} from "@/api/system";
  export default {
    name: "orgtree",
    data() {
      return {
        filterText:'',//申报单位过滤
        treeData: [],//申报单位树数据
        searchDataList:[],
        filterFlag:true,
        treeSearchData:[],
        // 申报单位树参数映射
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        choosedOrgs:''
      }
    },
    props: {
      orgCodeVisiblesubmit: {
        type: Boolean,
        default: false
      },
      checkedKeys:{
        type: Array,
        default: () => []
      }
    },
    watch: {
      filterText(val) {
        if(val){
          this.getSearchOrgCodeList(val)
        }else{
          this.getOrgCodeList()
        }
      }
    },
    created(){
      this.getOrgCodeList();
    },
    methods: {
      // 获取申报单位树
      getSearchOrgCodeList(name) {
        getDeptXieTree({name:name}).then(response => {
          this.treeData = response.data.data
          this.searchDataList = response.data.data
        })
      },
      // 获取申报单位树
      getOrgCodeList() {
        getDeptTree().then(response => {
          this.treeData = response.data.data
        })
      },
      // 异步加载申报单位树
      getTreeChildren(node, resolve){
        if(!this.filterText){
          getDeptTree({
            parentId:node.data.id
          }).then(response => {
            resolve(response.data.data)
          })
        }else{
          resolve(this.dealData(this.searchDataList,node.data.id))
        }
      },
      dealData(list,id){
        var dataList = list.filter(item=>item.id == id)
        if(dataList && dataList.length>0){
          return dataList[0].children
        }else{
          for(var i in list){
            var forList = this.dealData(list[i].children,id)
            if(forList && forList.length>0){
              return forList
            }
          }
        }
        return []
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      //申报单位树点击事件
      orgCodeClick(data){
        this.$emit('orgCodeClick',data)
      },
      // 申报单位树弹框关闭事件
      orgCodeHandleClosesubmit(){
        this.$emit('orgCodeHandleClosesubmit')
      },
      cancelDept(){
        this.$emit('orgCodeHandleClosesubmit')
      },
      confirmDept(){
        var choosedList = this.$refs.deptTree.getCheckedNodes(false);
        this.$emit('orgCodeCheckChange',choosedList)
        this.$emit('orgCodeHandleClosesubmit')
      },
      orgCodeCheckChange(data, checked, indeterminate) {
        this.choosedOrgs = ''
        var choosedList = this.$refs.deptTree.getCheckedNodes(false);
        for(var i in choosedList){
          this.choosedOrgs += choosedList[i].name + ','
        }
        // this.$emit('orgCodeCheckChange',choosedList)
      },
    }
  };
</script>

<style lang="scss">
  .el-tree>.el-tree-node{
    min-width:100%;
    min-height:100%;
    display: inline-block;
  }
</style>
